<!-- 项目审批 -->
<template>
	<view style="margin-bottom: 100rpx">
		<uni-nav-bar :fixed="true" color="#333333" background-color="#4364F7" :border="false">
			<view class="input-view">
				<uni-icons type="search" size="22" color="#666666" />
				<input v-model="searchVal" confirm-type="search" class="input" type="text" placeholder="品名/批次/货位" @confirm="search">
				<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22" @click="clear" />
			</view>
			<!-- <uni-search-bar style="width: 100%;" placeholder="搜索项目/机构" radius="100" clearButton="auto" @confirm="search" /> -->
		</uni-nav-bar>
		<mescroll-uni :down="downOption" @emptyclick="downCallback" @down="downCallback" :up="upOption" @up="upCallback"
		 :fixed="true">
			<view class="mycard">
				<view v-for="(item,index) in cardList" :key="index" class="card-item">
					<uni-card is-full title="库存货品" is-shadow note="true">
						<view class="audit-card-content">
							<view class="uni-flex uni-row">
								<view class="flex-item-30">名称</view>
								<view class="flex-item-70">{{item.goodsName}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">规格</view>
								<view class="flex-item-70">{{item.spec}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">产地</view>
								<view class="flex-item-70">{{item.maker}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">型号</view>
								<view class="flex-item-70">{{item.model}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">材质</view>
								<view class="flex-item-70">{{item.materialCode}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">批次</view>
								<view class="flex-item-70">{{item.batchNum}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">货位</view>
								<view class="flex-item-70">{{item.goodsPosi}}</view>
							</view>
							<!-- <view class="uni-flex uni-row">
								<view class="flex-item-30">计重方式</view>
								<view class="flex-item-70">{{item.weightMethod}}</view>
							</view>	 -->			
							<view class="uni-flex uni-row">
								<view class="flex-item-30">库存数量</view>
								<view class="flex-item-70 text-green">{{item.qty}} {{item.qtyUnit}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">库存重量</view>
								<view class="flex-item-70 text-green">{{item.weight}} {{item.weightUnit}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">冻结数量</view>
								<view class="flex-item-70 text-yellow">{{item.qty}} {{item.qtyUnit}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">冻结重量</view>
								<view class="flex-item-70 text-yellow">{{item.weight}} {{item.weightUnit}}</view>
							</view>
						</view>

						<template v-slot:footer>
							<view class="footer-box">
								<view class="iconfont my-iconfont text-green"></view>
								<view class="iconfont my-iconfont text-red"></view>
								<view class="cuIcon-check text-blue" @tap="selectedClick(index)">选择</view>
							</view>
						</template>
					</uni-card>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniCard from "@/components/uni-card/uni-card"
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		getRandomArrayElements,
		filePreview,
		formatStatus
	} from '@/utils/index.js'
	import { formatDate } from '@/utils/datetime.js'
	export default {
		props: {
			goodsName: {
				type: String,
				required: false
			}
		},
		components: {
			MescrollUni,
			uniCard,
			uniTag,
			uniIcons
		},
		computed: mapGetters(['user']),
		data() {
			return {
				mescroll: null,
				isPass: false,
				id: 0,
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					// toTop: {
					// 	src: '/static/img/backtop.png'
					// },
					textNoMore: '没有更多数据了'
				},
				// 列表数据
				cardList: [],
				searchVal: ''
			}
		},
		onLoad(options) {
		},
		methods: {
			filePreview,
			formatStatus,
			formatDate,
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {

				/**
				 * todo: api请求分页查询项目待办
				 */

				let pageNum = mescroll.num // 页码, 默认从1开始
				let pageSize = mescroll.size // 页长, 默认每页10条
				let goodsName = this.searchVal
				if (this.goodsName) {
					// goodsName = this.goodsName
				}
				const params = {
					// clientID: 181,//this.user.clientId,
					batchNum: this.searchVal,
					goodsName:  goodsName,
					goodsPosi: this.searchVal,
					pageIndex: pageNum,
					pageSize: pageSize
				  }
				this.$minApi.getInStockGoodsDetail(params).then(res => {

					const data = res
					if (data) {
						
						let totalPage = data.totalCount
						let hasNext = this.cardList.length < totalPage
						
						if (mescroll.num === 1) this.cardList = [] //如果是第一页需手动置空列表
						this.cardList = this.cardList.concat(data.list) //追加新数据
					
						// 成功隐藏下拉加载状态
						// 方法一(推荐): 后台接口有返回列表的总页数 totalPage
						mescroll.endByPage(data.list.length, totalPage)
						this.$nextTick(() => {
							mescroll.endSuccess(data.list.length)
						})					
						
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					mescroll.endErr()
				})

				// // 此时mescroll会携带page的参数:
				// let pageNum = mescroll.num // 页码, 默认从1开始
				// let pageSize = mescroll.size // 页长, 默认每页10条

				// this.$minApi.pageQueryProjectTodo({}, pageNum, pageSize).then(res => {
				// 	// 接口返回的当前页数据列表 (数组)
				// 	let curPageData = res.rows
				// 	// 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
				// 	let totalPage = res.totalPageCount
				// 	// 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
				// 	let totalSize = res.total
				// 	// 接口返回的是否有下一页 (true/false)
				// 	let hasNext = res.hasNextPage

				// 	if (mescroll.num == 1) this.cardList = [] //如果是第一页需手动置空列表
				// 	this.cardList = this.cardList.concat(curPageData) //追加新数据

				// 	// 成功隐藏下拉加载状态
				// 	// 方法一(推荐): 后台接口有返回列表的总页数 totalPage
				// 	mescroll.endByPage(curPageData.length, totalPage)
				// 	this.$nextTick(() => {
				// 		mescroll.endSuccess(curPageData.length)
				// 	})
				// }).catch(() => {
				// 	// 失败隐藏下拉加载状态
				// 	mescroll.endErr()
				// })
			},
			selectedClick(index) {
				const item = this.cardList[index]
				this.$emit('selected', item)
			},
			search() {

				// this.upOption.num = 1
				// uni.showLoading({
				// 	title: '正在查询数据...'
				// })
				/**
				 * todo: api请求查询项目待办
				 */
				let pageNum = 1 // 页码, 默认从1开始
				let pageSize = 20 // 页长, 默认每页10条
				let goodsName = this.searchVal
				if (this.goodsName) {
					// goodsName = this.goodsName
				}
				const params = {
					clientID: 181,//this.user.clientId,
					batchNum: this.searchVal,
					goodsName:  goodsName,
					goodsPosi: this.searchVal,
					pageIndex: pageNum,
					pageSize: pageSize
				  }
				this.$minApi.getInStockGoodsDetail(params).then(res => {
				
					const data = res
					if (data) {
						
						let totalPage = data.totalCount
						let hasNext = this.cardList.length < totalPage
						
						this.cardList = [] //如果是第一页需手动置空列表
						this.cardList = this.cardList.concat(data.list) //追加新数据
					
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					// // 隐藏加载状态
					// uni.hideLoading()
				})
			},
			clear() {
				this.searchVal = ''
				this.search()
			}
		}
	}
</script>

<style>
	.mescroll-totop {
		opacity: 1 !important;
	}
	
</style>
